<template>
  <t-select v-model="localIcon" placeholder="请选择" :style="{ width: '400px' }"
    :popup-props="{ overlayInnerStyle: { width: '400px' } }" @change="selected" @clear="handleClear">
    <t-option v-for="item in options" :key="item.stem" :value="item.stem" class="overlay-options">
      <div>
        <t-icon :name="item.stem" />
      </div>
    </t-option>
    <template #valueDisplay><t-icon :name="localIcon" :style="{ marginRight: '8px' }" v-if="localIcon != '无'" />{{
      localIcon }}</template>
  </t-select>
</template>

<script setup>
import { ref, watch } from 'vue';
import { manifest } from 'tdesign-icons-vue-next';

const props = defineProps({
  icon: {
    type: String,
    default: ''
  }
});

const emits = defineEmits(['update:icon']);

// 获取全部图标的列表
const options = ref(manifest);
const localIcon = ref(props.icon);

// 监听外部传入的icon变化
watch(() => props.icon, (newVal) => {
  localIcon.value = newVal;
});

const selected = (icon) => {
  localIcon.value = icon;
  emits('update:icon', icon);
};

const handleClear = () => {
  localIcon.value = '';
  emits('update:icon', '无');
};
</script>

<style>
.overlay-options {
  display: inline-block;
  font-size: 20px;
}
</style>